<template>
  <!-- 商品分类 -->
  <div class="shop-class">
    <div class="header">
      <div class="state">
        <span class="state—one">状态:</span>
        <el-select v-model="commodityStatus" placeholder="请选择" class="select" clearable>
          <el-option
            v-for="(item,index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="name">
        <span class="name—one">名称:</span>
        <el-input v-model="commodityKeyowrd" placeholder="请输入内容" class="input"></el-input>
      </div>
    </div>
    <!-- 新增产品分类 -->
    <div class="newly">
      <el-button type="primary" @click="dlalog">新增产品分类</el-button>
      <Dlalog v-show="show" @isShow="isShow"></Dlalog>
    </div>
    <!-- 表格 -->
    <!-- <div class="body"> -->
    <el-table :data="tableData6">
      <el-table-column prop="id" label="名称" align="left"></el-table-column>
      <el-table-column prop="name" label="类型" align="left"></el-table-column>
      <el-table-column prop="amount1" label="分类图标" align="center">
        <el-image style="width: 30px; height: 30px" :src="url" fit="fill"></el-image>
      </el-table-column>
      <el-table-column prop="name1" label="排序" align="left"></el-table-column>
      <el-table-column prop="amount2" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" active-color="#409eff" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="dlalog">添加子目录</el-button>
          <el-button type="text" size="small" @click="dlalog">编辑</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData6)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </div> -->
  </div>
</template>

<script>
import Dlalog from "./Dlalog";
export default {
  created() {
    // this.$api.getClassify().then((res) => {
    //   this.tableData = res.data;
    // });
    this.changeData(this.value0, this.value1);
  },
  components: {
    Dlalog,
  },
  watch: {
    commodityKeyowrd() {
      //防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.changeData(this.value0, this.value1);
      }, 700);
    },
  },
  methods: {
    deleteRow(index, rows) {
      //删除
      rows.splice(index, 1);
    },
    edit(index, add) {
      //添加
      add.push(index, 1);
    },
    setStatus(status, row) {
      setTimeout(() => {
        if (true) {
          row.status = status ? 1 : 0;
        }
      }, 500);
    },
    changeData(ind, page) {
      // this.$api
      //   .getClassify({
      //     pageIndex: ind,
      //     pageSize: page,
      //     keyWord: this.commodityKeyowrd,
      //     status: this.commodityStatus,
      //   })
      //   .then((res) => {
      //     if (res.code === 1) {
      //       this.tableData = res.data;
      //       this.total = res.total;
      //     }
      //   });
    },
    isShow(a) {
      this.show = a;
    },
    dlalog() {
      this.show = true;
    },
    pageChange(ind) {
      this.pageIndex = ind;
    },
  },
  data() {
    return {
      showEdit: [], //显示编辑框
      showBtn: [],
      showBtnOrdinary: true,
      value: "true",
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      tableData6: [
        {
          id: "每日新品|515",
          name: "商品分类",
          name1: "10",
          state: true,
        },
        {
          id: "热门推荐|245",
          name: "商品分类",
          name1: "9",
        },
        {
          id: "家用电器|272",
          name: "商品分类",
          name1: "8",
        },
        {
          id: "家装家居|280",
          name: "商品分类",
          name1: "0",
        },
        {
          id: "户外出行|281",
          name: "商品分类",
          name1: "0",
        },
        {
          id: "美妆个护|282",
          name: "商品分类",
          name1: "0",
        },
        {
          id: "3C数码|283",
          name: "商品分类",
          name1: "0",
        },
        {
          id: "日用文创|284",
          name: "商品分类",
          name1: "0",
        },
        {
          id: "一级分类|526",
          name: "商品分类",
          name1: "0",
        },
      ],
      commodityStatus: null,
      commodityKeyowrd: "",
      show: false,
      value: "",
      input: "",
      tableData: [],
      total: 0,
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "无状态",
        },
        {
          value: "1",
          label: "有状态",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// 表格
.shop-class {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 15px 18px 10px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    width: 100%;
    height: 57px;
    display: flex;
    .state {
      width: 328px;
      height: 42px;
      .state—one {
        font-weight: bold;
        color: #48535d;
        font-size: 14px;
        margin-right: 17px;
      }
      .select {
        width: 264px;
      }
    }
    .name {
      width: 350px;
      height: 42px;
      margin-left: 30px;

      .name—one {
        font-weight: bold;
        color: #48535d;
        font-size: 14px;
        margin-right: 17px;
      }
      .input {
        width: 222px;
      }
    }
  }
  .newly {
    width: 100%;
    height: 40px;
    margin: 16px 0;
  }

  // .el-table__body-wrapper.is-scrolling-none {
  //   overflow-y: scroll;
  //   max-height: calc(100vh - 457px); //table-固定头部的高度
  // }

  // .body {
  //   width: 100%;
  //   flex: 1;
  //   margin-top: 16px;
  //   overflow: hidden;
  //   display: flex;

  // }
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
</style>
